<template>
	<scroll-view @scrolltolower='handleScrollToLower' scroll-y="true" enable-flex class="video_main">
		<view class="video_item"
		v-for="item in videowp" :key='item.id'
		@click='handleGoVideo(item)'
		>
		<image :src="item.img" mode="widthFix"></image>
		</view>
	</scroll-view>
</template>

<script>
	export default {
		props: {
			urlobj: Object
		},
		data() {
			return {
				videowp: [],
				hasMore: true
			}
		},
		watch: {
			urlobj() {
				this.videowp = []
				this.getList()
			}
		},
		mounted() {
			this.getList()
		},
		methods: {
			async getList() {
				const result = await this.request({
					url: this.urlobj.url,
					data: this.urlobj.params
				})
				if(result.res.videowp.length ===0 ) {
					this.hasMore = false;
					uni.showToast({
						title: '没有更多数据',
						icon: 'none'
					})
					return;
				}
				this.videowp = [...this.videowp, ...result.res.videowp] 
			},
			//分页
			handleScrollToLower() {
				if(this.hasMore) {
					this.urlobj.params.skip += this.urlobj.params.limit
					this.getList()
				} else {
					uni.showToast({
						title: '没有更多数据',
						icon: 'none' 
					})
				}
			},
			//图片点击跳转
			handleGoVideo(item) {
			//数据存储到全局
			getApp().globalData.video = item
			// 页面跳转
			uni.navigateTo({
				url: '/pages/videoPlay/videoPlay'
			})
			}
		}
	}
</script>

<style scoped lang="less">
	.video_main {
		display: flex;
		flex-wrap: wrap;
		height: calc(100vh - 72rpx);
		.video_item {
			width: 33.33%;
			border: 5rpx solid #fff;
		}
	}

</style>